<template>
	<div class="padding-across-10" v-loading="loading" element-loading-text="拼命加载中">
		<div class="flex-inline">
			<headerOpreate :opreate-datas="opreateDatas" style="float: left;" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<div style="width: 100%">
			<el-row>
				<el-col :span="10">
					<div>
						<span style="font-size: 13px;font-weight: bold">{{$t('message.start')}}</span>
						<el-date-picker :editable="false" :clearable="false" v-model="startTime" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
						<span style="font-size: 13px;font-weight: bold">{{$t('message.end')}}</span>
						<el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="endTime" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
					</div>
				</el-col>
				<el-col :span="14">
					<div class="block" style="text-align:right;">
						<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		<el-table border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
			<el-table-column :show-overflow-tooltip="true" type="index" align="center"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="日志名称" align="center" prop="file"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="大小" align="center" prop="size"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="更新时间" align="center" prop="updatetime"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" label="下载" align="center">
				<template slot-scope="scope">
					<a style="font-size:13px;margin-top:3px;text-decoration:underline;cursor: pointer;color :#20A0FF" @click="download(scope.row)">下载</a>
				</template>
			</el-table-column>
		</el-table>
		<div class="block" style="text-align:right;margin-bottom:60px;padding-top: 5px">
			<el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="currentPage" :page-sizes="[10,20,30,40,50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import headerOpreate from '../../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				isReload: false,
				startTime: new Date((date.getTime() - 3600 * 1000 * 24 * 7)).format('yyyy-MM-dd') + ' 00:00:00',
				endTime: date.format('yyyy-MM-dd') + ' 23:59:59',
				loading: false,
				tableData: [],
				commandTableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
					//					{
					//						type: 'primary',
					//						size: 'small',
					//						icon: "el-icon-eleg-icon_table el-icon--left",
					//						name: "导出表格",
					//						action: "exportExcel"
					//					},
					//					{
					//						show: GloabFun.getUid() == 'admin' ? true : false,
					//						size: "small",
					//						type: "danger",
					//						icon: "el-icon-delete2 el-icon--left",
					//						name: "删除",
					//						action: "deleteMultiple"
					//					}
					]
				}
			},
			props: {
				subArgs: {
					type: Object,
					default: function() {
						return {};
					}
				}
			},
			methods: {
				executeAction(action) {
					if(action) {
						this[action]();
					}
				},
				handleCurrentChange(val) {
					this.currentPage = val;
					this.getDatas();
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.getDatas();
				},
				//起始时间
				changeStartTime(val) {
					this.startTime = val + ' 00:00:00';
					this.getDatas();
				},
				//结束时间
				changeEndTime(val) {
					this.endTime = val + ' 23:59:59';
					this.getDatas();
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				formateSelection() {
					var result = [],
					array = this.multipleSelection;
					for(var i = 0; i < array.length; i++) {
						result.push(array[i].keyid);
					}
					return result;
				},
				//批量删除控制记录
				deleteMultiple() {
					if(GloabFun.getUid() == 'admin') {
						if(this.formateSelection().length > 0) {
							this.$confirm('此操作将删除所选系统日志记录，是否继续？', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								HttpServer.httpPost.call(this, '/Api/SysLog/Delete', {
									keyid: this.formateSelection()
								}, function(response) {}, function(response) {
									if(response.data.code === 0) {
										this.getDatas();
										this.$notify({
											title: '成功',
											message: this.$t('message.bulkDeleteSuccess'),
											type: 'success',
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: '错误',
											message: response.data.msg,
											duration: 2500
										});
									}
								});
							}).catch(() => {
								this.$notify.info({
									title: '消息',
									message: this.$t('message.cancleOperation'),
									duration: 2500
								})
							});
						} else {
							this.$notify({
								title: this.$t('message.warning'),
								message: '请选择要批量操作的项',
								type: 'warning',
								duration: 2500
							});
						}
					} else {
						this.$notify({
							title: this.$t('message.warning'),
							message: '无操作权限',
							type: 'warning',
							duration: 2500
						});
					}
				},
				//下载
				download(row) {
				//				window.location.href(row.path);
				window.location.href = row.path;
			},
				//去掉时间中的T
				formateData(array) {
					for(var i = 0; i < array.length; i++) {
						var index1 = array[i].updatetime.indexOf("T");
						array[i].updatetime = array[i].updatetime.substring(0, index1) + " " + array[i].updatetime.substring(index1 + 1, index1 + 9);
					}
				},
				reloadDatas() {
					this.isReload = true;
					this.getDatas();
				},
				getDatas() {
					this.loading = true;
					var param = {
						page: this.currentPage,
						size: this.pageSize,
						filter: "",
						UserId: parseInt(GloabFun.getKeyId()),
						begin: this.startTime,
						end: this.endTime
					}
					HttpServer.httpPost.call(this, '/Api/DebugLog/List', param, function(response) {}, function(response) {
						this.loading = false;
						//					console.log('调试日志', response);
						if(response.data.code === 0) {
							this.formateData(response.data.list);
							this.tableData = response.data.list;
							this.totalSize = response.data.totalcount;
							if(this.isReload){
								this.$notify({
									title: '成功',
									message: this.$t('message.refreshSuccess'),
									type: 'success',
									duration: 2500
								});
							}
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
						this.isReload = false;
					});
				}
			},
			created() {
				this.getDatas();
			}
		}
	</script>
	<style scoped lang="less">
		.name {
			color: #20a0ff;
		}

		.flex-inline {
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;
			.set-time {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.el-date-editor.el-input {
			width: 130px;
		}

		.edit-mission {
			padding-top: 50px;
			.el-dialog__header {
				background-color: #000;
			}
			.el-dialog__body {
				position: relative;
			}
			.clearfloat {
				height: 100px;
				max-height: 150px;
			}
		}
	</style>